/*过度效果*/
.slide-left-enter,.slide-right-leave-active {
    transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active,.slide-right-enter {
    transform: translate3d(-100%, 0, 0);
}
.toggleSide-enter,.toggleSide-leave-active{
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}
.toggleSide-enter-active，.toggleSide-leave{
    -webkit-transform: translate3d(0, 0%, 0);
    transform: translate3d(0, 0%, 0);
}
.fade-enter-active,.fade-leave-active {
    transition: all .2s ease;
}

.fade-enter,.fade-leave-active {
    opacity: 0;
}
/*动画效果*/
.fadeIn-enter-active {
    animation: fadeInRight .3s ease;
}
.fadeIn-leave-active {
    animation: fadeOutRight .3s ease;
}
/*从右边渐进*/
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}
/*放大缩小*/
@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3);
        }
    50% {
        opacity: 1;
    }
}